<template>
  <div class="freeCpu">
    <div class="flexb">
      <span class="checkWord">
        {{ $t('swap.s74') }}（{{ $t('ndxStake.remainTimes', {num:user && user.remainFreeOrderCount || 0}) }}）
      </span>
      <el-popover
        placement="bottom"
        trigger="hover"
        popper-class="freeCpuPopover"
        v-if="$appName === 'eosNewdex'">
        <div>
          <div class="flex">
            <div>
              <img v-if="user && user.level"
              :src="handleGetVipLogo()" alt="">
              <i v-else
                class="iconfont icon-v gray"
                style="font-size: 17px;"></i>
            </div>
            <div class="ml5">{{ $t('ndxStake.cpuFreeNum', {num: levelRuleNum || 0}) }}</div>
          </div>
          <div class="mt5">
            <span class="freeCpuTip" style="color: #999;">* {{ $t('ndxStake.upCpuFreePend') }}</span>
            <span class="colorThis"
            v-if="!embed"
            @click="handleCpuGoPage" style="cursor: pointer;">{{ $t('ndxStake.upLevel') }} ></span>
          </div>
          <!-- <div class="mt5">
            <span class="freeCpuTip" style="color: #999;">* {{ $t('ndxStake.upCpuFreePend1') }}</span>
          </div> -->
        </div>
        <div slot="reference" style="cursor: pointer;color: #999;" class="cpuHoverTip">
          <i class="iconfont icon-xinxi iconfont1"></i>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { vipLogo } from '@/utils/wallet';

export default {
  name: 'freeCpu', // 免cpu
  data() {
    return {
      checkCpu: true,
      levelRuleNum: '',
    }
  },
  components: {},
  props: {
    user: Object,
    embed: {
      type: Boolean,
      default: false
    },
    noLimitNum: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    // 监听账户等级变化
    user: {
      handler: function listen() {
        this.handleLevelRule()
      },
      deep: true,
    },
  },
  computed: {},
  created() {},
  mounted() {
    // 获取等级说明
    if (this.$store.state.app.scatter.identity) {
      this.handleLevelRule();
    }
  },
  beforeDestroy() {},
  methods: {
    // 获取等级说明
    handleLevelRule() {
      const level = this.user && this.user.level;
      if (!this.user || (!this.user.level && this.user.level !== 0)) return;
      this.$http.get('/levelRule/list').then((res) => {
        if (res.code !== 0) return;
        this.levelRuleNum = res.ruleList.find(v => level === v.level).freeOrderQuota;
      });
    },
    handleCpuGoPage() {
      const scat = this.$store.state.app.scatter;
      if (scat && scat.identity) {
        this.$router.push('/member');
        return;
      }
      this.$router.push('/member-not-logged');
    },
    handleGetVipLogo() {
      return vipLogo()
    },
    handleCheckbox() {
      if (!this.user.remainFreeOrderCount) {
        this.checkCpu = false;
        return;
      }
      this.checkCpu = !this.checkCpu;
      this.$emit('listenFreeCpu', 'check')
    },
  },
}
</script>
<style lang="scss" scoped>
.freeCpu {
  position: relative;
  // margin-top: 0;
  // margin-bottom: -12px;
  // align-items: start;

  /deep/ .iconfont1 {
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
  }

  /deep/ .cpuHoverTip {
    display: inline-block;
    font-size: 12px;
    margin-left: 6px;
    line-height: 12px;
    margin-right: 6px;
  }
  /deep/ .checkWord {
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 3px;
    color: #999;
  }
}
</style>
